<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>病虫害数据管理</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" th:href="@{/plugin/AdminLTE/bootstrap/css/bootstrap.min.css}" href="../static/plugin/AdminLTE/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" th:href="@{/plugin/AdminLTE/dist/css/AdminLTE.min.css}" href="../static/plugin/AdminLTE/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" th:href="@{/plugin/AdminLTE/dist/css/skins/skin-blue.min.css}" href="../static/plugin/AdminLTE/dist/css/skins/skin-blue.min.css">
    <link th:href="@{/plugin/fancybox/jquery.fancybox.css}" href="../static/plugin/fancybox/jquery.fancybox.css" media="screen" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugin/jquery-confirm/jquery-confirm.min.css}" href="../static/plugin/jquery-confirm/jquery-confirm.min.css" media="screen" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugin/toastr/toastr.min.css}" href="../static/plugin/toastr/toastr.min.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body class="hold-transition skin-blue sidebar-mini" th:data-basePath="@{/}">
<a href="#" class="btn btn-primary hide" id="fullscreen_exit"><i class="glyphicon glyphicon-resize-small"></i> 退出全屏</a>

<div class="wrapper">
    <header class="main-header">
        <a href="#" class="logo">
            <span class="logo-mini">病虫害数据管理系统</span>
            <span class="logo-lg">病虫害数据管理系统</span>
        </a>
        <nav class="navbar navbar-static-top" role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                </ul>
                <ul sec:authorize="isAnonymous()" class="nav navbar-nav">
                    <li><a th:href="@{/login}" href="#">登陆 </a></li>
                    <li><a th:href="@{/register}" href="#">注册</a></li>
                </ul>
                <ul sec:authorize="isAuthenticated()" class="nav navbar-nav">
                    <li><a href="#" id="fullscreen"><i class="glyphicon glyphicon-resize-full"></i> 全屏</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span sec:authentication="name" class="">Alexander Pierce</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a th:href="@{/logout}" href="#"><span>注销</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu">
                <li><a data-id="intro" th:data-href="@{/intro}" href="beishan.html"><i class="fa fa-file"></i> <span>常见病虫害介绍</span></a></li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-bug"></i> <span>虫害数据</span>
                        <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a data-id="pest-create" th:data-href="@{/pest/create}" href="pest/create.html"><i class="fa fa-plus"></i><span>新增</span></a></li>
                        <li><a data-id="pest-view" th:data-href="@{/pest/view}" href="view.html"><i class="fa fa-list"></i><span>查看</span></a></li>
                        <li><a data-id="pest-show" th:data-href="@{/pest/show}" href="show.html"><i class="fa fa-image"></i><span>展示</span></a></li>
                        <li><a data-id="pest-recognition" th:data-href="@{/pest/recognition}" href="pest/recognition.html"><i class="fa fa-circle"></i><span>识别</span></a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-leaf"></i> <span>病害数据</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
                    <ul class="treeview-menu">
                        <li><a data-id="disease-create" th:data-href="@{/disease/create}" href="disease/create.html"><i class="fa fa-plus"></i><span>新增</span></a></li>
                        <li><a data-id="disease-view" th:data-href="@{/disease/view}" href="view.html"><i class="fa fa-list"></i><span>查看</span></a></li>
                        <li><a data-id="disease-show" th:data-href="@{/disease/show}" href="show.html"><i class="fa fa-image"></i><span>展示</span></a></li>
                    </ul>
                </li>
                <li><a data-id="visualization" data-fullscreen="true" th:data-href="@{/link/visualization}" href="link.html"><i class="fa fa-columns"></i> <span>数据可视化</span></a></li>
                <li><a data-id="insect" data-fullscreen="true" th:data-href="@{/link/insect}" href="link.html"><i class="fa fa-columns"></i> <span>昆虫</span></a></li>
                <li><a data-id="animal" data-fullscreen="true" th:data-href="@{/link/animal}" href="link.html"><i class="fa fa-columns"></i> <span>动物名录</span></a></li>
                <li><a data-id="plant" data-fullscreen="true" th:data-href="@{/link/plant}" href="link.html"><i class="fa fa-columns"></i> <span>植物名录</span></a></li>
                <li><a data-id="gis" data-fullscreen="true" th:data-href="@{/link/gis}" href="link.html"><i class="fa fa-link"></i> <span>GIS数据集成</span></a></li>
                <li><a data-id="about" th:data-href="@{/about}" href="about.html"><i class="fa fa-book"></i> <span>关于</span></a></li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <section class="content">
            <ul id="tab" class="nav nav-tabs" role="tablist">
                <li role="presentation">
                    <a href="#example" role="tab" data-toggle="tab">
                        <button type="button" class="close" data-dismiss="alert">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                    </a>
                </li>
            </ul>
            <div id="tab-content" class="tab-content" style="background-color: #ffffff;">
                <div class="box box-primary tab-pane" role="tabpanel" id="example">
                    <div class="box-body">
                        正在加载中...
                    </div>
                    <div class="overlay">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div th:fragment="footer" th:remove="tag">
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
            </div>
            技术支持团队：<strong>中国科学院计算机网络信息中心科研信息化技术与应用实验室</strong>&nbsp; &nbsp; &nbsp;   邮箱：<strong>esc@cnic.cn</strong>
        </footer>
    </div>
</div>
</body>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script th:src="@{/plugin/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js}" src="../static/plugin/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script th:src="@{/plugin/AdminLTE/bootstrap/js/bootstrap.min.js}" src="../static/plugin/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
<script th:src="@{/plugin/AdminLTE/dist/js/app.min.js}" src="../static/plugin/AdminLTE/dist/js/app.min.js"></script>
<script th:src="@{/plugin/fancybox/jquery.fancybox.js}" src="../static/plugin/fancybox/jquery.fancybox.js"></script>
<script th:src="@{/plugin/jquery-confirm/jquery-confirm.min.js}" src="../static/plugin/jquery-confirm/jquery-confirm.min.js"></script>
<script th:src="@{/plugin/toastr/toastr.min.js}" src="../static/plugin/toastr/toastr.min.js"></script>
<script th:src="@{/js/data.js}" src="../static/js/data.js"></script>

<script>
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };

    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    $(document).ready(function () {
        var $tab = $('#tab'), $tab_li = $tab.find('li'), $tab_content = $('#tab-content'), $tab_panel = $tab_content.children('div.box');
        var tab_stack = [];

        $tab_li.remove(), $tab_panel.remove();
        $('li a[data-id]').click(function () {
            var $it = $(this), $li = $it.parent();

            var $parents_li = $li.parents('li');
            var id = $it.attr('data-id');
            if (id) {
                var $a = $tab.find('a[href="#' + id + '"]');
                if ($a.length == 0) {//tab页未创建
                    var $new_li = $tab_li.clone();
                    $a = $new_li.find('a');

                    var name = $it.text();
                    for (var i = $parents_li.length - 1; i >= 0; --i) {
                        name = $parents_li.eq(i).find('a:first').text() + ' | ' + name;
                    }
                    $a.html(name + $a.html()).attr('href', '#' + id);

                    var $new_panel = $tab_panel.clone().attr('id', id);

                    $tab.append($new_li);
                    $tab_content.append($new_panel);
                    $.get($it.attr('data-href'),
                        function (html) {
                            $new_panel.children('.box-body').html(html);
                            $new_panel.children('.overlay').remove();
                        }, 'html'
                    );

                    //注册关闭事件
                    $a.find('.close').click(function () {
                        $new_panel.remove();
                        $new_li.remove();
                        tab_stack.remove($new_li.find('a').get(0));
                        var len = tab_stack.length;
                        if (len > 0) {
                            $('li a[data-id="' + $(tab_stack[len - 1]).attr('href').substr(1) + '"]').click();
                        }
                    });
                } else if ($li.hasClass('active')) {//当前选中的就是自身
                    return false;
                }
                $a.click();//切换到选中的标签页
            }
            return false;
        });

        $tab.on('shown.bs.tab', 'a', function (e) {
            if (e.relatedTarget) {
                $('li a[data-id="' + $(e.relatedTarget).attr('href').substr(1) + '"]').removeClass('active').parents('li').removeClass('active');
            }
            var $t = $('li a[data-id="' + $(e.target).attr('href').substr(1) + '"]');
            $t.addClass('active').parents('li').addClass('active');
            tab_stack.remove(e.target);
            tab_stack.push(e.target);
        });

        $('a[data-id="about"]').click();

        (function () {
            var $panel, $iframe;
            var $fs_exit = $('#fullscreen_exit');
            $fs_exit.click(function () {
                if ($iframe.length) {
                    $iframe.removeClass('fullscreen').appendTo($panel.children('.box-body')).resize();
                } else {
                    $panel.removeClass('fullscreen').appendTo($tab_content);
                }
                $fs_exit.addClass('hide');
            });

            $('#fullscreen').click(function () {
                $panel = $tab_content.children('.active');
                $iframe = $panel.find('iframe');
                if ($panel.length) {
                    ($iframe.length ? $iframe : $panel).addClass('fullscreen').appendTo($(document.body)).resize();
                    $fs_exit.removeClass('hide');
                }
                return false;
            });
        })();
    });
</script>
<style>
    .fullscreen {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0;
        padding: 0;
        z-index: 1050;
        height: 100%;
    }

    #fullscreen_exit {
        position: fixed;
        top: 0;
        right: 20px;
        z-index: 1100;
        opacity: 0.1;
    }

    #fullscreen_exit:hover {
        opacity: 1;
    }
</style>
</html>
